el |
您所在的位置：网站首页 › el-table 树形结构 合并单元格 › el |
el
|
el-table 合并行和列排序功能
在element官方上只有合并列+列排序功能，合并行+列排序并无具体实例。 如果sortable和span-method同时使用会出现点击列排序后单元格的合并还是排序前的，导致数据展示错误。 本篇记录一下此功能的方法 HTML结构如下 挡车工汇总 {{ row.gh + " " + row.dcg }} 细纱{{ getSeiresDevsn(row.devSnArea) }}号JavaScript //传参 data（表格原数据），index（表格的index） mergeTable(data, index) { this["areaArr" + index] = []; this["areaSpan" + index] = 0; let areaArr = this["areaArr" + index]; let areaSpan = this["areaSpan" + index]; for (let i = 0; i 0 ? 1 : 0; return { rowspan: row1, colspan: col1 }; } }, //排序后的监听 sortChange(tableindex) { let data = this.$refs["table" + tableindex].tableData; this.mergeTable(data, tableindex); }, //清除排序 clearSort(ref) { if (this.$refs[ref]) { this.$refs[ref].clearSort(); } },因为我有4个表格 所以除了objectSpanMethod方法以外其他都是通用的，调用方法的时候需要传表格的index 原数据调用如下（因为我的请求写在VueX里，所以获取原数据在组件里的watch里） data() { return { Dialog: true, today: "", scrollY: 0, scrollY1: 0, scrollY2: 0, tableToggle: "车间", tableData: [], tableData1: [], tableData2: [], tableData3: [], loading: true, loading1: true, loading2: true, worker: "detail", areaArr1: [], //表格行数组 areaSpan1: 0, areaArr2: [], //表格行数组 areaSpan2: 0, areaArr3: [], //表格行数组 areaSpan3: 0, areaArr4: [], //表格行数组 areaSpan4: 0, enlargeDialog: false }; }, computed: { xiShaWorkerGroupNewestState() { return this.$store.state.xiShaWorkerGroupNewestState; }, xiShaWorkerSumGroupNewestState() { return this.$store.state.xiShaWorkerSumGroupNewestState; } }, watch: { xiShaWorkerGroupNewestState: { immediate: true, handler(val) { let params = ["xiaolv", "devSn"]; let { data } = val; data.map((item) => { params.map((param) => { item[param] = Number(item[param]); }); }); this.clearSort("table1"); this.clearSort("table3"); this.mergeTable(data, "1"); this.mergeTable(data, "3"); this.tableData1 = data; this.loading1 = false; } }, xiShaWorkerSumGroupNewestState: { immediate: true, handler(val) { let params = ["avg_xiaolv"]; let { data } = val; data.map((item) => { params.map((param) => { item[param] = toFixed(item[param]); }); }); this.clearSort("table2"); this.clearSort("table4"); this.mergeTable(data, "2"); this.mergeTable(data, "4"); this.tableData3 = val.data; } } },当监听到表格数据改变的时候，要先清空表格内的Sort 本篇重点就是当排序变化的时候，拿到当前table排序后的数据，重新再进行合并单元格的操作 //排序后的监听 sortChange(tableindex) { let data = this.$refs["table" + tableindex].tableData; this.mergeTable(data, tableindex); }, 展示结果如下
|
排序前是有合并的 
根据效率排序后 临近数据无相同名字，所以没有合并单元格的情况。【本文地址】
今日新闻 |
推荐新闻 |